require(['./config'], ()=>{
    require(['template','header','footer','fly','elevateZoom'], (template,header)=>{
        class Detail {
            constructor(){
            this.getData().then(()=>{
                this.render()
                this.addToCart()
                this.magnifier()
                this.tiaozhuan()
            })
            
            }
            getData(){
                //从地址栏拿到id，根据id请求数据
                const id = window.location.search.slice(1).split('&').reduce((obj,item)=>{
                    var arr = item.split('=')
                    obj[arr[0]]= arr[1]
                    return obj
                },{}).id
                //id可能在别的方法里面还用             
                this.id = Number(id)
                return new Promise(resolve =>{
                    $.get('http://rap2.taobao.org:38080/app/mock/256888/api/detils',{id:this.id},resp=>{
                        if(resp.code===200){
                            // console.log(resp)
                            const {detils} = resp.body
                            // 由于请求的rap2接口，所以detils里没有id
                            this.detils = {...detils,id:this.id}
                            resolve()
                        }
                    })
                })
               
            }
            render(){
                $('#zuotu').html(template('detilsTemplate',{
                    ...this.detils
                }))
                $('#wrap-but').html(template('datuTemplate',{ 
                    ...this.detils
                }))
                console.log(this.detils)
            } 

            magnifier(){                
                $('.zoom-image').elevateZoom({
                    gallery: 'gal1' // 小图容器盒子，ul的id（不加#）
                })
            }

            addToCart () {
                
                $('#addbuy-btn').on('click', (e) => {
                    this.fly(e)
                    // 在真实项目里，购物车数据需要发送后端存入数据库，但是我们这个项目里存localStorage即可
                    // 先取出来，判断购物车是否为空
                    // 没有数据得到null
                    let cart = localStorage.getItem('cart')
                    
                    if (cart) {
                        // 有数据
                        cart = JSON.parse(cart)
                        // 判断当前数据在购物车里是否已存在
                        const isExist = cart.some(shop => {
                            return shop.id === this.detils.id
                        })
                        if (isExist) {
                            // 当前商品曾经加入过购物车
                            // 数量加一即可
                            cart = cart.map(shop => {
                                if (shop.id === this.detils.id) {
                                    shop.count += Number($('#cont').html())
                                }
                                return shop
                            })
                        } else {
                            // 当前商品这是第一次加购物车
                            // 把当前数据push进去
                            cart.push({
                                ...this.detils,
                                count: Number($('#cont').html()),
                                // checked: true
                            })
                        }
                        // 重新再存一次
                        localStorage.setItem('cart', JSON.stringify(cart))
                    } else {
                        // 购物车为空
                        // 就只存当前这一条，但是就算只有一条，还是存数组，方便下一次存储
                        // 给this.detail默认数量为1
                        // 默认处于选中状态
                        localStorage.setItem('cart', JSON.stringify([{...this.detils,count: Number($('#cont').html())}]))
                    }
                })
                let n = 0
                $('.add').on('click',()=>{                    
                     n++
                    $('#cont').html(n)
                })
                $('.reduce').on('click',()=>{                    
                    n--
                    if(n<0) n=0
                   $('#cont').html(n)
               })
            
            }
            

            fly (e) {
                // 加入购物车时的抛物线
                $(`<img src="${this.detils.imgs[0]}" style="width: 50px;height: 50px;border-radius:50%">`).fly({
                    start:{
                      left: e.clientX,  //开始位置（必填）#fly元素会被设置成position: fixed
                      top: e.clientY,  //开始位置（必填）
                    },
                    end:{
                      left: $('.gwnum').offset().left - $(window).scrollLeft(), //结束位置（必填）
                      top: $('.gwnum').offset().top - $(window).scrollTop(), //结束位置（必填）
                    },
                    speed: 1.1, //越大越快，默认1.2
                    vertex_Rtop: 100, //运动轨迹最高点top值，默认20
                    onEnd: function () {
                        this.destroy()
                        // 调用header里封装好的方法重新计算数量
                        header.calcCartTotal()
                    }
                  })
            }

            tiaozhuan(){
                $('.gwnum').on('click',function(){
                    location.replace('html/buy.html')
                })
            }
        }
         return new Detail()
    })
})















































